<template>
  <!-- 产品介绍 -->

  <div>
    <!-- 遮罩层组件 -->
    <transition name="fade">
      <div
        class="mask-overlay"
        v-show="showIndustryOverlay || showTemplateOverlay"
      >
        <!-- 行业弹窗 -->
        <div v-show="showIndustryOverlay">
          <MaskOverlayIndustry
            @close="showIndustryOverlay = false"
            @submit="submitIndustry"
          />
        </div>
        <!-- 推荐模版弹窗 -->
        <div v-show="showTemplateOverlay">
          <MaskOverlayTemplate
            @close="showTemplateOverlay = false"
            @handleUse="handleUse"
          />
        </div>
      </div>
    </transition>
    <carousel :carouselItems="carouselItems" :height="'550px'">
      <template #carousel-custom>
        <img
          src="@/assets/productIntroduce/title.png"
          alt=""
          style="max-width: 200px; margin-bottom: 60px"
        />
        <div style="margin-bottom: 80px">
          <p>以匠人般的专注雕琢每一份模板，经严苛筛选，只为呈上兼具品</p>
          质与创意的优质之作。
        </div>
      </template>
    </carousel>

    <div
      style="
        background: rgb(245, 250, 254);
        padding-left: 100px;
        padding-top: 5px;
        padding-bottom: 5px;
      "
    >
      <PublicNavBar
        :items="navbarList"
        direction="horizontal"
        :horizontalWidth="horizontalWidth"
        @handleItemClick="navbarClick"
        :activeIndex="activeNavbarIndex"
        :itemSpacingArray="[0, 40, 40, 40]"
      />
    </div>

    <!-- 新增区域：全维度产品架构，赋能企业云端新生态 -->
    <div v-if="activeNavbarIndex == 0" class="product-section">
      <div class="section-content background">
        <h2 class="section-title">全维度产品架构，赋能企业云端新生态</h2>

        <div class="content-wrapper">
          <!-- 左侧分类导航 -->
          <div class="category-nav">
            <PublicNavBar
              :items="navItems"
              @handleItemClick="handleItemClick"
              :activeIndex="activeIndex"
            />
          </div>

          <!-- 右侧产品内容区域 -->
          <div class="product-content">
            <el-row :gutter="20">
              <el-col
                v-for="(product, index) in products"
                :key="index"
                :span="8"
                style="margin-bottom: 15px"
              >
                <div class="product-card">
                  <h3 class="product-title" style="padding-bottom: 15px">
                    {{ product.title }}
                  </h3>
                  <p
                    class="product-description f13"
                    style="padding-bottom: 20px"
                  >
                    {{ product.description }}
                  </p>
                  <button
                    class="carousel-btn f13"
                    style="
                      float: right;
                      padding: 8px;
                      border-radius: 5px;
                      margin-right: 0;
                    "
                  >
                    立即创建 -→
                  </button>
                </div>
              </el-col>
            </el-row>
          </div>
        </div>
      </div>
    </div>
    <!-- 微官网 -->
    <div v-if="activeNavbarIndex == 0 || activeNavbarIndex == 1">
      <!-- 右侧产品内容区域 - 每行4个产品 -->
      <div class="product-content" style="padding: 40px 0">
        <h3 style="margin: 10px 0">微官网</h3>
        <el-row :gutter="20">
          <el-col
            v-for="(product, index) in products"
            :span="6"
            style="margin-bottom: 20px"
          >
            <div
              class="product-card"
              style="height: 450px; position: relative; padding: 10px"
              @click="handleWechatClick(product)"
            >
              <!-- 产品信息 -->
              <div
                class="product-info"
                style="
                  position: absolute;
                  background-color: #fff;
                  width: 100%;
                  bottom: 0;
                  z-index: 9;
                "
              >
                <!-- 产品徽章区域 - 按照图片样式修改 -->
                <div class="product-badge-container">
                  <span class="product-service-type">{{
                    product.serviceType || "生活服务"
                  }}</span>
                  <span class="product-title-text">{{ product.title }}</span>
                </div>
                <!-- 累计下单信息 -->
                <div class="product-order-count">
                  累计已有{{ product.orderCount || "1000+" }}人下单
                </div>
                <!-- 产品描述 -->
                <p
                  class="product-description f12"
                  style="padding-right: 12px;
}"
                >
                  {{ product.description }}
                </p>
              </div>
              <!-- 产品图片 -->
              <div class="product-image-container">
                <img :src="product.image" alt="" class="product-image" />
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>

    <!--PC官网 -->
    <div v-if="activeNavbarIndex == 0 || activeNavbarIndex == 2">
      <!-- 右侧产品内容区域 - 每行4个产品 -->
      <div class="product-content" style="padding: 40px 0">
        <h3 style="margin: 10px 0">PC官网</h3>
        <el-row :gutter="20">
          <el-col
            v-for="(product, index) in products"
            :span="6"
            style="margin-bottom: 20px"
          >
            <div
              class="product-card"
              style="height: 450px; position: relative; padding: 10px"
            >
              <!-- 产品信息 -->
              <div
                class="product-info"
                style="
                  position: absolute;
                  background-color: #fff;
                  width: 100%;
                  bottom: 0;
                  z-index: 9;
                "
              >
                <!-- 产品徽章区域 - 按照图片样式修改 -->
                <div class="product-badge-container">
                  <span class="product-service-type">{{
                    product.serviceType || "生活服务"
                  }}</span>
                  <span class="product-title-text">{{ product.title }}</span>
                </div>
                <!-- 累计下单信息 -->
                <div class="product-order-count">
                  累计已有{{ product.orderCount || "1000+" }}人下单
                </div>
                <!-- 产品描述 -->
                <p
                  class="product-description f12"
                  style="padding-right: 12px;
}"
                >
                  {{ product.description }}
                </p>
              </div>
              <!-- 产品图片 -->
              <div class="product-image-container">
                <img :src="product.image" alt="" class="product-image" />
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>

    <!-- 软件产品展示区域 -->
    <div
      v-if="activeNavbarIndex == 0 || activeNavbarIndex == 3"
      class="software-section"
    >
      <div class="product-content">
        <h3 style="margin: 10px 0 30px 0">软件产品</h3>
        <el-row :gutter="20">
          <el-col
            v-for="(software, index) in softwareProducts"
            :key="index"
            :span="6"
            style="margin-bottom: 20px; padding-right: 0"
          >
            <div class="software-card">
              <!-- 产品名称 -->
              <h4 class="software-title">{{ software.title }}</h4>

              <!-- 产品描述 -->
              <p class="software-description">{{ software.description }}</p>

              <!-- 产品特点 -->
              <div class="software-features">
                <div class="feature-label">商品特点</div>
                <div class="feature-content color-348CF8">
                  {{ software.features }}
                </div>
              </div>

              <!-- 产品优势 -->
              <div class="software-advantage">
                <div class="advantage-label">商品优势</div>
                <div class="advantage-content">{{ software.advantage }}</div>
              </div>

              <!-- 价格和购买按钮 -->
              <div class="software-footer">
                <div class="software-price">{{ software.price }}</div>
                <button class="software-buy-btn">立即购买</button>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>

    <!-- 经典案例区域 -->
    <div class="classic-cases-section">
      <div class="product-content">
        <h3 class="cases-title">经典案例</h3>
        <div class="cases-container">
          <div class="case-item" style="">
            <div class="case-logo one">
              <img
                src="https://lingxin1314.oss-cn-beijing.aliyuncs.com/case1.png"
                alt=""
              />
            </div>
            <div class="case-name" style="padding-top: 35px">星源奥特光纤</div>
          </div>
          <div class="case-item">
            <div class="case-logo two" style="margin-top: -10px">
              <img
                src="https://lingxin1314.oss-cn-beijing.aliyuncs.com/case2.png"
                alt=""
              />
            </div>
            <div class="case-name">卡尤迪生物科技</div>
          </div>
          <div class="case-item">
            <div class="case-logo three" style="margin-top: -10px">
              <img
                src="https://lingxin1314.oss-cn-beijing.aliyuncs.com/case3.png"
                alt=""
              />
            </div>
            <div class="case-name">恋爱分配站</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
// 引用公共的导航栏组件
import PublicNavBar from "@/components/public/NavBar";
// 引入carousel组件
import carousel from "@/components/Home/HeroSection.vue";
export default {
  name: "productIntroduction",
  components: {
    carousel,
    PublicNavBar,
  },
  data() {
    return {
      // 遮罩层是否显示
      showIndustryOverlay: false, //行业弹窗
      showTemplateOverlay: false, //推荐模版弹窗
      activeIndex: 0,
      activeNavbarIndex: 0,
      horizontalWidth: "55%",
      navbarList: [
        { label: "全部", path: "" },
        { label: "微官网", path: "" },
        { label: "PC端官网", path: "" },
        { label: "软件开发", path: "" },
      ],
      navItems: [
        { label: "精选产品", path: "" },
        { label: "游戏行业", path: "" },
        { label: "金融科技", path: "" },
        { label: "医疗健康", path: "" },
        { label: "教育行业", path: "" },
        { label: "物流行业", path: "" },
        { label: "电商行业", path: "" },
        { label: "政务行业", path: "" },
        { label: "工业制造", path: "" },
        { label: "能源行业", path: "" },
      ],
      carouselItems: [
        {
          imageUrl: require("@/assets/productIntroduce/carousel_back1.png"),
          primaryBtnText: "立即创建",
          secondaryBtnText: "立即咨询",
        },
      ],
      // 动态产品数据
      products: [
        {
          id: 1,
          title: "民宿预订",
          description:
            "预订流程超便捷，如同安装软件般轻松，一键下单，即刻搞定。实时房态查询，价格透明无套路。",
          hasButton: true,
          row: 1,
          category: "精选产品",
          image: require("@/assets/productIntroduce/website1.png"), // 示例图片路径
        },
        {
          id: 2,
          title: "乡村建设",
          description:
            "详细梳理乡村游玩攻略，包括乡村简史、党员积分、村民积分等，让你的乡村之旅规划变得轻松简单。",
          hasButton: false,
          row: 1,
          category: "精选产品",
          image: require("@/assets/productIntroduce/website2.png"), // 示例图片路径
        },
        {
          id: 3,
          title: "企业宣传",
          description:
            "以最简洁明了的方式，为您呈现企业核心业务亮点、重大项目进展。快速查阅产品详细信息，轻松掌握企业服务优势。",
          hasButton: false,
          row: 1,
          category: "精选产品",
          image: require("@/assets/productIntroduce/website3.png"), // 示例图片路径
        },
        {
          id: 4,
          title: "微小猪",
          description:
            "微小猪专注微信公众平台建站，无需技术门槛，3分钟就能快速搭建专属官网，提供海量行业模板与丰富互动功能。 ",
          hasButton: false,
          row: 2,
          category: "电商行业",
          image: require("@/assets/productIntroduce/website4.png"), // 示例图片路径
        },
        {
          id: 5,
          title: "恋爱分配站",
          description:
            "以最简洁明了的方式，为您呈现企业核心业务亮点、重大项目进展。快速查阅产品详细信息，轻松掌握企业服务优势。",
          hasButton: false,
          row: 2,
          category: "社交行业",
          image: require("@/assets/productIntroduce/website5.png"), // 示例图片路径
        },
        // {
        //   id: 6,
        //   title: "智慧园区",
        //   description:
        //     "岗位多元化与专业化并存，学历要求较高，注重experiencedexperience薪酬待遇具有吸引力，与企业战略紧密结合。",
        //   hasButton: false,
        //   row: 2,
        //   category: "工业制造",
        // },
        // // 为其他类别添加产品示例
        // {
        //   id: 7,
        //   title: "游戏社区平台",
        //   description:
        //     "专为游戏玩家打造的社区交流平台，支持实时聊天、组队开黑、游戏攻略分享等功能。",
        //   hasButton: false,
        //   row: 3,
        //   category: "游戏行业",
        // },
        // {
        //   id: 8,
        //   title: "金融风控系统",
        //   description:
        //     "基于AI技术的金融风险控制系统，提供实时监测、智能预警和风险评估功能。",
        //   hasButton: false,
        //   row: 3,
        //   category: "金融科技",
        // },
        // {
        //   id: 9,
        //   title: "在线医疗平台",
        //   description:
        //     "连接医生与患者的在线诊疗平台，支持远程问诊、电子处方、健康管理等服务。",
        //   hasButton: false,
        //   row: 3,
        //   category: "医疗健康",
        // },
        // {
        //   id: 10,
        //   title: "在线教育平台",
        //   description:
        //     "提供在线课程学习、互动交流、考试评估等功能，帮助学生实现知识的自我提升。",
        //   hasButton: false,
        //   row: 3,
        //   category: "教育行业",
        // },
        // {
        //   id: 11,
        //   title: "物流配送平台",
        //   description:
        //     "提供物流配送服务，包括订单管理、配送跟踪、客户服务等功能。",
        //   hasButton: false,
        //   row: 3,
        //   category: "物流行业",
        // },
        // {
        //   id: 12,
        //   title: "电子商务平台",
        //   description:
        //     "提供商品展示、订单管理、支付结算等功能，帮助企业实现线上销售。",
        //   hasButton: false,
        //   row: 3,
        //   category: "电商行业",
        // },
        // {
        //   id: 13,
        //   title: "政务服务平台",
        //   description:
        //     "提供政府服务、信息发布、问题咨询等功能，帮助政府部门实现服务透明化、效率化。",
        //   hasButton: false,
        //   row: 3,
        //   category: "政务行业",
        // },
        // // 能源行业
        // {
        //   id: 15,
        //   title: "能源分析系统",
        //   description:
        //     "基于大数据分析的智能决策支持系统，帮助企业实现数据驱动的业务优化。",
        //   hasButton: false,
        //   row: 3,
        //   category: "能源行业",
        // },
      ],
      // 软件产品数据
      softwareProducts: [
        {
          id: 1,
          category: "软件开发",
          title: "易捷OA",
          description:
            "理念先进，操作简便，功能丰富实用，智能流程定制智能流程定制，多端访问便捷。",
          features: "管理规范化 / 协同高效化 / 操作便捷化",
          advantage: "高效协同降本增效",
          price: "¥1599/年",
        },
        {
          id: 2,
          category: "软件开发",
          title: "智慧社区管理平台",
          description:
            "理念先进，操作简便，功能丰富实用，智能流程定制智能流程定制，多端访问便捷。",
          features: "管理规范化 / 协同高效化 / 操作便捷化",
          advantage: "高效协同降本增效",
          price: "¥1599/年",
        },
        {
          id: 3,
          category: "软件开发",
          title: "智慧党建",
          description:
            "理念先进，操作简便，功能丰富实用，智能流程定制智能流程定制，多端访问便捷。",
          features: "管理规范化 / 协同高效化 / 操作便捷化",
          advantage: "高效协同降本增效",
          price: "¥1599/年",
        },
        {
          id: 4,
          category: "软件开发",
          title: "政府采购电商平台解决方案服务商",
          description:
            "理念先进，操作简便，功能丰富实用，智能流程定制智能流程定制，多端访问便捷。",
          features: "管理规范化 / 协同高效化 / 操作便捷化",
          advantage: "高效协同降本增效",
          price: "¥1599/年",
        },
        {
          id: 5,
          category: "软件开发",
          title: "易捷OA",
          description:
            "理念先进，操作简便，功能丰富实用，智能流程定制智能流程定制，多端访问便捷。",
          features: "管理规范化 / 协同高效化 / 操作便捷化",
          advantage: "高效协同降本增效",
          price: "¥1599/年",
        },
        {
          id: 6,
          category: "软件开发",
          title: "智慧社区管理平台",
          description:
            "理念先进，操作简便，功能丰富实用，智能流程定制智能流程定制，多端访问便捷。",
          features: "管理规范化 / 协同高效化 / 操作便捷化",
          advantage: "高效协同降本增效",
          price: "¥1599/年",
        },
        {
          id: 7,
          category: "软件开发",
          title: "智慧党建",
          description:
            "理念先进，操作简便，功能丰富实用，智能流程定制智能流程定制，多端访问便捷。",
          features: "管理规范化 / 协同高效化 / 操作便捷化",
          advantage: "高效协同降本增效",
          price: "¥1599/年",
        },
        {
          id: 8,
          category: "软件开发",
          title: "政府采购电商平台解决方案服务商",
          description:
            "理念先进，操作简便，功能丰富实用，智能流程定制智能流程定制，多端访问便捷。",
          features: "管理规范化 / 协同高效化 / 操作便捷化",
          advantage: "高效协同降本增效",
          price: "¥1599/年",
        },
      ],
    };
  },
  created() {
    // 待根据条件判断是否显示行业弹窗
    this.showIndustryOverlay = true;
    console.log("从哪个页面跳转过来的", this.$route);
  },
  mounted() {
    localStorage.setItem("products", JSON.stringify(this.products));
  },
  methods: {
    // 点击产品卡片
    handleWechatClick(product) {
      console.log('产品卡片点击', product);
      // 跳转购买前产品详情页
      this.$router.push({
        path: "/productTemplateBefore",
        query: {
          // 后续传递参数
          // productId: product.id,
        },
      });
    },
    // 提交行业
    submitIndustry() {
      this.showTemplateOverlay = true; //推荐模版弹窗显示
    },
    // 关闭遮罩层
    closeOverlay() {
      this.showOverlay = false;
    },
    // 立即使用
    handleUse() {
      // 跳转提交订单页面
      this.$router.push({
        path: "/productTemplateOrder",
        query: {
          // 后续传递参数
        },
      });
      this.showTemplateOverlay = false;//关闭推荐模版弹窗
    },
    // 顶部导航栏切换回调
    navbarClick(obj) {
      this.activeNavbarIndex = obj.index;
      this.horizontalWidth =
        obj.index == 0
          ? "55%"
          : obj.index == 1
          ? "63%"
          : obj.index == 2
          ? "69%"
          : "69%";
      console.log("打印", obj);
    },
    // 根据当前激活的导航项筛选产品
    handleItemClick(obj) {
      const newArr = JSON.parse(localStorage.getItem("products"));
      // 获取当前激活的导航项标签
      const activeNavLabel = this.navItems[obj.index].label;
      const arr = newArr.filter((item) => item.category === activeNavLabel);
      this.activeIndex = obj.index;
      // 获取当前激活的导航项标签
      // const newProducts = JSON.parse(JSON.stringify(this.products));
      // const arr = newProducts.filter(
      //   (item) => item.category === this.navItems[obj.index].label
      // );
      this.products = [];
      this.products = arr;
      // this.products = arr;
      console.log("点击", obj.index, newArr);
    },
  },
};
</script>
<style scoped>
.mask-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.95);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2000;
  transition: opacity 0.3s ease;
}
/* 过渡动画样式 */
.fade-enter-from,
.fade-leave-to {
  opacity: 0; /* 初始/结束透明度为 0 */
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s ease; /* 过渡属性：透明度，0.5秒，缓动曲线 */
}
/* 产品区域样式 */
.product-section {
  padding: 80px 0;
}

/* 内容容器 */
.product-content,
.section-content {
  max-width: 1200px;
  margin: 0 auto;
}
.section-content.background {
  background: #ffffff !important;
}

/* 区域标题 */
.section-title {
  text-align: center;
  font-size: 28px;
  color: #333;
  margin-bottom: 60px;
  padding-top: 40px;
}

/* 内容布局容器 */
.content-wrapper {
  display: flex;
  padding-left: 1px;
  box-shadow: 0px 4px 4px 0px rgba(58, 104, 242, 0.2);
}

/* 左侧导航 */
.category-nav {
  width: 180px;
  margin-right: 20px;
}

/* 右侧产品内容 */
.product-content {
  flex: 1;
}

/* 产品行 */
.product-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
}

/* 产品卡片 - 添加过渡动画 */
.product-card {
  width: 100%;
  height: 183px;
  background-color: #fff;
  padding: 25px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  position: relative;
  transition: all 0.3s ease;
  overflow: hidden;
  cursor: pointer;
}
/* 产品图片容器 */
.product-image-container {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
}
/* 产品图片 */
.product-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

/* 鼠标hover到卡片时的样式 */
.product-card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

/* 鼠标hover到卡片时，标题变为主题色 */
.product-card:hover .product-title {
  color: #348cf8;
}

.product-info {
  padding: 15px 0;
  display: flex;
  flex-direction: column;
  flex: 1;
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s, opacity 0.3s ease;
}
/* 鼠标hover到卡片时，显示产品信息区域 */
.product-card:hover .product-info {
  visibility: visible;
  opacity: 1;
}

/* 产品徽章容器 - 按照图片样式重新定义 */
.product-badge-container {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}

/* 服务类型标签 */
.product-service-type {
  background: linear-gradient(110deg, #f0e2a9 0%, #d8b76b 100%);
  border: 1px solid #d1b267;
  color: #433209;
  padding: 2px 6px;
  border-radius: 2px;
  font-size: 11px;
  margin-right: 8px;
  font-weight: 500;
}

/* 产品标题文本 */
.product-title-text {
  font-size: 14px;
  color: #333;
  font-weight: bold;
}

/* 累计下单信息 */
.product-order-count {
  font-size: 11px;
  color: #aa7123;
  margin-bottom: 10px;
}

/* 创建按钮 - 默认隐藏，hover时显示 */
.carousel-btn {
  opacity: 0;
  transition: opacity 0.3s ease;
  border: none;
  cursor: pointer;
}

/* 鼠标hover到卡片时，显示创建按钮 */
.product-card:hover .carousel-btn {
  opacity: 1;
}
/* 软件产品区域样式 */
.software-section {
  padding: 40px 0;
}
/* 软件产品卡片样式 */
.software-card {
  background-color: #f6f9ff;
  border: 1px solid #e8e8e8;
  border-radius: 8px;
  padding: 20px;
  height: 300px;
  position: relative;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
  background-image: url("@/assets/productIntroduce/soft_back.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-size: 100% 60%;
}

.software-card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

/* 软件产品分类标签 */
.software-category {
  font-size: 12px;
  color: #666;
  margin-bottom: 10px;
}

/* 软件产品名称 */
.software-title {
  font-size: 16px;
  color: #333;
  font-weight: bold;
  margin-bottom: 10px;
}

/* 软件产品描述 */
.software-description {
  font-size: 13px;
  color: #666;
  line-height: 1.5;
  margin-bottom: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

/* 软件产品特点 */
.software-features {
  margin-bottom: 8px;
}

.feature-label,
.advantage-label {
  font-size: 13px;
  color: #333;
  font-weight: 500;
  margin-bottom: 4px;
}

.feature-content,
.advantage-content {
  font-size: 13px;
  /* color: #666; */
}

/* 软件产品优势 */
.software-advantage {
  /* margin-bottom: 20px; */
}

/* 软件产品底部（价格和购买按钮） */
.software-footer {
  position: absolute;
  bottom: 28px;
  left: 20px;
  right: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* 软件产品价格 */
.software-price {
  font-size: 16px;
  color: #348cf8;
  font-weight: bold;
}

/* 立即购买按钮 */
.software-buy-btn {
  background-color: #348cf8;
  color: white;
  border: none;
  padding: 8px 15px;
  border-radius: 5px;
  margin-right: 0;
  /* padding: 10px 20px; */
  border-radius: 8px;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.software-buy-btn:hover {
  background-color: #348cf8;
  /* transform: translateY(-1px); */
  box-shadow: 0 2px 8px rgba(52, 140, 248, 0.3);
}
/* 经典案例区域样式 */
.classic-cases-section {
  padding: 60px 0;
  background-color: #fff;
}

.cases-title {
  text-align: center;
  font-size: 24px;
  color: #333;
  margin-bottom: 40px;
  font-weight: normal;
}

.cases-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 200px;
}

.case-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.case-logo.one {
  height: 60px;
}
.case-logo.two {
  height: 100px;
}
.case-logo.three {
  height: 100px;
}

.case-logo {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 10px;
}

.logo-bg-black {
  width: 100%;
  height: 100%;
  background-color: #000;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-size: 24px;
  font-weight: bold;
  letter-spacing: 2px;
}

.logo-bg-pink {
  width: 100%;
  height: 100%;
  background-color: #fff;
  border: 1px solid #ddd;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.coyote-text {
  color: #e83e8c;
  font-size: 20px;
  font-weight: bold;
}

.logo-bg-white {
  width: 100%;
  height: 100%;
  background-color: #fff;
  border: 1px solid #ddd;
  display: flex;
  justify-content: center;
  align-items: center;
}

.love-text {
  color: #e83e8c;
  font-size: 24px;
  font-weight: bold;
  font-style: italic;
}

.case-name {
  font-size: 14px;
  color: #666;
  margin-top: 10px;
  font-weight: bold;
}
</style>
